/* 棋盘容器 - 使用垂直弹性布局排列行 */
.board {
  display: flex;
  flex-direction: column;
}

/* 棋盘行 - 使用水平弹性布局排列格子
   负边距用于消除边框重叠 */
.board-row {
  display: flex;
  margin-bottom: -2px;
  /* 补偿底部边框重叠 */
}

/* 单个格子样式
   负边距用于消除右侧和下侧边框重叠 */
.square {
  width: 80px;
  /* 格子尺寸 */
  height: 80px;
  font-size: 24px;
  /* 棋子文字大小 */
  font-weight: bold;
  border: 2px solid #333;
  /* 边框样式 */
  background: #fff;
  cursor: pointer;
  margin-right: -2px;
  /* 消除右侧边框重叠 */
  margin-bottom: -2px;
  /* 消除底部边框重叠 */
}

/* 格子悬停效果 */
.square:hover {
  background: #f0f0f0;
  /* 悬停背景色变化 */
}

/* 游戏主容器布局 */
.game {
  display: flex;
  /* 弹性布局并列棋盘和游戏信息 */
  gap: 20px;
  /* 元素间距 */
  padding: 20px;
  /* 内边距 */
}

/* 游戏信息侧边栏 */
.game-info {
  min-width: 200px;
  /* 保持侧边栏最小宽度 */
}

/* 状态显示区域 */
.status {
  margin-bottom: 10px;
  /* 与棋盘间距 */
  font-size: 20px;
  /* 状态文字大小 */
}

/* 悔棋按钮基础样式 */
.undo-button {
  margin-bottom: 10px;
  /* 与列表间距 */
  padding: 8px 16px;
  /* 按钮内边距 */
  background: #666;
  /* 默认背景色 */
  color: white;
  border: none;
  border-radius: 4px;
  /* 圆角效果 */
  cursor: pointer;
}

/* 禁用状态按钮样式 */
.undo-button:disabled {
  background: #ccc;
  /* 禁用背景色 */
  cursor: not-allowed;
  /* 禁用光标 */
}

/* 历史步骤列表样式 */
ol {
  padding-left: 20px;
  /* 调整列表缩进 */
}

/* 历史步骤列表项 */
li {
  margin-bottom: 5px;
  /* 项间距 */
}